<template>
    <div class="cart">
        <!-- 顶部导航 -->
        <header>
            <van-nav-bar
                title="购物车"
                left-text="返回"
                :right-text="edit ? '管理' : '完成'"
                left-arrow
                placeholder
                @click-left="router.go(-1)"
                @click-right="store.commit('cartModule/changeEdit')"
                fixed
                />
            </header>

        <!-- 空状态显示 -->
        <div class="empty" v-if="!cartList.length">
            <van-empty
                :image-size="[240, 200]"
                image="https://img-qn.51miz.com/Element/00/77/79/68/57c0c008_E777968_fb6acd5a.png"
                description="购物车里没有商品"
                >
                <van-button round type="success"  class="bottom-button" @click="toHome">去逛逛</van-button>
            </van-empty>
        </div>

        <!-- 有数据显示 -->
        <div class="non-empty" v-else>
            <van-swipe-cell v-for="item in cartList" :key="item.id">
                <van-checkbox v-model="item.check" @click="single"  checked-color="#f5222d"/>
                <van-card
                    :price="(item.price * item.count).toFixed(2)"
                    :title="item.title"
                    class="goods-card"
                >
                <template #thumb>
                    <img :src="item.image">
                </template>
                    <template #num>
                        <van-stepper v-model="item.count" theme="round" @minus="reduceGoods(item.id)" @plus="addGoods(item.id)" button-size="22" disable-input />
                    </template>
                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" @click="deleteGoods(item.id)" class="delete-button" />
                </template>
            </van-swipe-cell>

        </div>


        <!-- 提交订单模块 -->
        <van-submit-bar 
        v-if="edit"
        :price="total * 100" 
        :button-text="'结算(' + checkNum.length + ')'"
        @click="submitOrder"
        >
        <van-checkbox :checked="AllChecked" @click.stop="changeState" checked-color="#f5222d">全选</van-checkbox>
        </van-submit-bar>

        <van-submit-bar 
        v-else
        :price="total * 100" 
        button-text="删除选中"
        @click="deleteChecked"
        >
        <van-checkbox :checked="AllChecked" @click.stop="changeState" checked-color="#f5222d">全选</van-checkbox>
        </van-submit-bar>


        <!-- 回到顶部 -->
        <van-cell/>
        <van-back-top right="15vw" bottom="20vh" />
    </div>
</template>


<script setup>
    import { computed } from 'vue'
    import { useStore } from 'vuex'
    import {useRouter} from 'vue-router'
    import { showFailToast } from 'vant'

    let store = useStore()
    let router = useRouter()

    //购物车里的数据
    let cartList = computed(()=>{
        return store.getters['cartModule/getCartList']
    })

    //已选中的数据
    let checkNum = computed(()=>{
        return store.getters['cartModule/getCartList'].filter(item=> item.check === true)
    })

    //状态编辑
    let edit = computed(()=> store.getters['cartModule/getEdit'])
    //全部选中
    let AllChecked = computed(()=>store.getters['cartModule/getAllCheck'])
    //合计
    let total = computed(()=> {
        return store.getters['cartModule/getTotal']
    })

    //删除商品
    function deleteGoods(id){
        store.commit('cartModule/deleteGoods',id)
        store.commit('cartModule/total')
        if(cartList.value.length === 0){
            store.commit('cartModule/allCheckFalse')
        }
    }

    //增加商品
    function addGoods(id){
        store.commit('cartModule/changeCount',id)
        store.commit('cartModule/total')
    }
    //减少商品
    function reduceGoods(id){
        store.commit('cartModule/reduceGoods',id)
        store.commit('cartModule/total')
    }

    //改变全选
    function changeState(){
        if(cartList.value.length === 0){
            return
        }
        store.commit('cartModule/changeAllCheck')
        store.commit('cartModule/allCheck')
        store.commit('cartModule/total')
        
    }

    //单选
    function single(){
        store.commit('cartModule/total')
        store.commit('cartModule/single')
    }

    //删除选中
    function deleteChecked(){
        store.commit('cartModule/deleteChecked')
        store.commit('cartModule/cancel')
        store.commit('cartModule/total')
        if(!cartList.length){
            store.commit('cartModule/changeEdit')
        }
    }
    //提交订单
    function submitOrder(){
        if(cartList.value.length !== 0 && checkNum.value.length !== 0){
            router.push('/sub')
        }else{
            showFailToast('你没有选择商品哦')
        }
        
    }

    function toHome(){
        router.push('/')
    }
</script>


<style lang="less" scoped>
@import '../../style/common.less';
.cart{
    display: block;
    position: relative;
    // overflow-x: hidden;
    >.empty{
        margin-top: 50px;
    }
    >.van-empty{
        margin-top: 80px;
    }
    >.non-empty{
        padding: 0 0 50px 0;
    }
}

/deep/.van-swipe-cell__wrapper{
    padding: 0 0 0 18px;
    width: 376px;
    display: flex;
    justify-content: space-between;
    border:  1px solid @g6;
    border-radius: 8px 0 0 8px;
    margin: 5px 0;
    >.goods-card{
        width: 95%;
        background: @g1;
    }
}

/deep/.van-card__thumb{
    margin-right: 20px;
    >img{
        width: 94px;
        height: 90px;
        border: 1px solid @g3;
    }
}




.delete-button {
    height: 100%
  }

/deep/.van-submit-bar{
    position: fixed !important;
    bottom: 50px;
    background: @g1;
}


/deep/.van-nav-bar__text {
    color: #f5222d ;
}

/deep/ .van-nav-bar__arrow {
    color: #f5222d ;
}
/deep/ .van-nav-bar__title{
    color: #f5222d;
}

/deep/.van-stepper__plus{
    background: #f5222d;
    color: #ffffff;

}
/deep/.van-stepper__minus{
    color: #f5222d;
    border: 1px solid #f5222d;
}

</style>